<template>
	<view class="fabu-content">
		<u-form :model="form" ref="uForm">
			<u-form-item class="shopName" label="商品名称" label-width='160' label-align='center'>
				<u-input v-model="form.name" input-align='right' :clearable='false' placeholder="请输入商品名称(必填)"
					placeholder-style="margin-left:-20rpx" />
			</u-form-item>
			<view class="twoBox">
				<u-form-item label="商品标签" label-width='160' label-align='center'>
					<u-input v-model="form.intro" input-align='right' :clearable='false' placeholder="请简短输入商品的标签(选填)"
						placeholder-style="margin-left:-20rpx" />
				</u-form-item>
				<u-form-item class="shopnum" label="商品数量" label-width='160' label-align='center'>
					<text>1</text>
				</u-form-item>
				<u-form-item label="商品原价" label-width='160' label-align='center'>
					<u-input type="number" :clearable='false' v-model="form.newPrice" input-align='right'
						placeholder="请输入商品原价(必填)" placeholder-style="margin-left:-20rpx" />
					<text class=" u-p-l-10">￥</text>
				</u-form-item>

				<u-form-item label="商品现价" label-width='160' label-align='center'>
					<u-input type="number" :clearable='false' v-model="form.oldPrice" input-align='right'
						placeholder="请输入商品现价(必填)" placeholder-style="margin-left:-20rpx" />
					<text class=" u-p-l-10">￥</text>
				</u-form-item>
				<u-form-item label="添加备注" label-width='160' label-align='center'>
					<u-input type="number" :clearable='false' v-model="form.oldPrice" input-align='right'
						placeholder="(选填)" placeholder-style="margin-left:-20rpx" />
				</u-form-item>
			</view>

			<view class="three-box">
				<u-form-item>
					<textarea class="productDetails" value="" placeholder="请输入商品的详情(必填)" maxlength='-1' />
				</u-form-item>
			</view>

			<view class="four-box">
				<view class="text">
					上传商品封面图片
				</view>
				<u-form-item :border-bottom='false'>
					<u-upload :action="action" max-count='1'></u-upload>
				</u-form-item>
			</view>

			<view class="five-box">
				<view class="text">
					上传商品详情图片
				</view>
				<u-form-item :border-bottom='false'>
					<u-upload :action="action" max-count='9'></u-upload>
				</u-form-item>
			</view>
		</u-form>

<view class="buttonBox">
	<u-button class="firstbtn" size="default" type="error" >点击上传</u-button>
	<u-button size="default" type="error" @click="$u.route('pages/fabu/qiuguo')" >切换求购</u-button>

</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					intro: '', //商品标签
					newPrice: '',
					oldPrice: '',
					value: '' //商品详情
				},
				action: 'http://www.example.com/upload', //服务器上传地址
			};
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #eee;
		position: fixed;
		bottom: 100rpx;
		top: 88rpx;
		overflow-y: scroll;
	}

	.fabu-content {

		.shopName {
			margin: 30rpx 0;
			background-color: #FFFFFF;

			/deep/.uni-input-input {
				margin-left: -20rpx;
			}
		}

		.twoBox {
			background-color: #FFFFFF;

			/deep/.uni-input-input {
				margin-left: -20rpx;
			}

			.shopnum {
				text {
					flex: 1;
					text-align: right;
					padding-right: 50rpx;

				}
			}
		}

		.three-box {
			/deep/ .u-form-item__body {
				background-color: #FFFFFF;

				.productDetails {
					height: 200rpx;
					width: 730rpx;
					padding: 0 20rpx;
					padding-top: 20rpx;
				}
			}

		}

		.four-box {

			.text {
				color: #6d6d6d;
				font-size: 16px;
				padding: 20rpx 0 0 20rpx;
			}

			/deep/ .u-form-item {
				padding: 10rpx 0 0 10rpx;
			}

			height: 300rpx;
			background-color: #FFFFFF;

		}

		.five-box {
			margin: 20rpx 0;

			.text {
				color: #6d6d6d;
				font-size: 16px;
				padding: 20rpx 0 0 20rpx;
			}

			/deep/ .u-form-item {
				padding: 10rpx 0 0 10rpx;
			}

			height: 300rpx;
			background-color: #FFFFFF;

		}
		
		.buttonBox{
			background-color: #fff;
			padding-top: 20rpx;
			.firstbtn{
				margin-bottom: 20rpx;
				
			}
			 .u-btn{
				width:690rpx;
				
			}
		}
		
	}
</style>
